/**
 * 窗口大小监听hook
 * 用于响应式布局，监听窗口宽高变化
 */
// @ts-ignore
import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowSize() {
  // 响应式的宽高
  const width = ref(window ? window.innerWidth : 0);
  const height = ref(window ? window.innerHeight : 0);

  // 调整大小处理函数
  const handleResize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  };

  // 监听窗口大小变化
  onMounted(() => {
    if (typeof window !== 'undefined') {
      window.addEventListener('resize', handleResize);
      // 初始化宽高
      handleResize();
    }
  });

  // 移除事件监听，防止内存泄露
  onUnmounted(() => {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', handleResize);
    }
  });

  // 返回响应式的宽高
  return {
    width,
    height
  };
} 